@use "scss/variables";
@use "scss/colors";

.additionalContent {
  margin-top: variables.$spacing-md;
}

.connectionsContainer {
  padding-left: variables.$spacing-xl;
}

.connectionsList {
  margin: 0;
  padding-inline-start: variables.$spacing-xl;
}

.moreConnections {
  width: fit-content;
  margin-left: variables.$spacing-sm;
}

.breakingChangeMessage {
  line-height: 1.2;
  font-size: variables.$font-size-md;

  & * {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
  }

  // needed to override the Markdown component style
  & a {
    line-height: inherit;
  }
}

// Have to use !important here to override the Input component style,
// since we don't have access to the same classes here like .focused
// to make a more specific selector
.upgradeInput {
  border-color: colors.$yellow-300 !important;

  &:hover {
    border-color: colors.$yellow-500 !important;
  }
}
